import { ref, computed, watch } from 'vue'
import type { Ref } from 'vue'
import useCommonStore from '@/store/common'

export function useSelectClass() {
  let popperclass = ref('')
  let mode = computed(() => useCommonStore().mode)
  watch(mode, () => {
    const map: { [key: string]: any } = {
      light: '',
      dark: 'wft-select-style',
    }
    popperclass.value = map[mode.value] || ''
  }, { immediate: true })
  return popperclass
}

export function useMonacoEditorStyle(...monacoInstance: Array<Ref<any>>) {
  if(!monacoInstance.length) return
  let mode = computed(() => useCommonStore().mode)
  watch(mode, () => {
    let theme = ''
    if(mode.value == 'dark') {
      theme = 'vs-dark'
    } else {
      theme = 'vs'
    }
    monacoInstance.forEach((instance: Ref<any>) => {
      if(instance.value?.updateOptions) {
        instance.value.updateOptions({ theme })
      }
    })
  }, { immediate: true })
}